import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { showList } from '_redux/actions/weather'
import 'css/index/common/dragDrop.scss'
import Weather from '../weather/Weather'
import { connect } from 'react-redux'
import Scrollbar from 'smooth-scrollbar'
const validValue = (value, max, min) => {
  return Math.min(Math.max(value, min), max)
}

class RxDragDrop extends Component {
  constructor(props) {
    super(props)
    this.state = {
      width: 1300,
      height: 749,
      defaultW: 1300,
      defaultH: 749,
    }
  }
  // shouldComponentUpdate(nextProps, nextState) {
  //   const { show } = this.props.weather
  //   if (show !== nextProps)
  // }
  componentDidUpdate(prevProps) {
    const { show } = this.props.weather
    if (prevProps.weather.show !== show) {
      this.update()
    }
  }
  update = () => {
    const { show } = this.props.weather
    if (!show) {
      Scrollbar.destroy(this.content)
      return
    }
    Scrollbar.init(this.content)
  }
  destory(e) {
    e.preventDefault()
    this.props.showList(false)
  }
  render() {
    const drapDropStyle = {
      width: this.props.index === 4 ?
        '1100px' :
        this.props.index === 5 ?
          Math.max(this.state.width, 1300) + 'px' :
          '500px'
    }
    const contentStyle = {
      backgroundColor: this.props.index === 4 ? '#fff' : '#eee',
      height: this.props.index === 4 ?
        '608px' :
        this.props.index === 5 ?
          Math.max(this.state.height, 500) + 'px' :
          '310px'
    }
    const {show} = this.props.weather
    return (
      show ? (<div ref={drapDrop => this.drapDrop = drapDrop} className="dragDrop" style={drapDropStyle}>
        <h3 ref={title => this.title = title} className='dragDrop-title'>{this.props.feature.feature.get('name')}-{'天气'}</h3>
        <a href="#" id="dragDrop-closer" className="dragDrop-closer" onClick={this.destory.bind(this)}></a>
        <div className="dragDrop-content" ref={content => this.content = content} style={contentStyle}>
          {this.props.index === 5 && <Weather feature={this.props.feature} {...this.props} />}
          
        </div>
        <div className='resize' ref={resize => this.resize = resize}></div>
      </div>) : null 
    )
  }
}
RxDragDrop.propTypes = {
  title: PropTypes.string,
  children: PropTypes.node,
  destory: PropTypes.func,
  index: PropTypes.number,
  name: PropTypes.string,
  weather: PropTypes.object,
  showList: PropTypes.func,
  feature: PropTypes.object,
}
export default connect(({ weather, feature})=> ({
  weather,
  feature,
}), (dispatch) => ({
  showList: function(flag) {
    dispatch(showList(flag))
  }
}))(RxDragDrop)